<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" :inline="true">
      <el-form-item label="">
        <el-input
          style="width: 140px"
          v-model="queryParams.progressType"
          placeholder="上下行名称"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="">
        <el-select
          filterable
          style="width: 140px"
          v-model="queryParams.hasDelete"
          clearable
          placeholder="状态"
        >
          <el-option label="禁用" value="1"></el-option>
          <el-option label="启用" value="0"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="handleQuery">搜索</el-button>
        <el-button type="primary" @click="congzhiQuery">重置</el-button>
        <el-button @click="handleAdd">添加</el-button>
      </el-form-item>
    </el-form>
    <el-table v-loading="loading" :data="typeList" height="62vh">
      <el-table-column label="上下行编号" prop="progressTypeCode" />
      <el-table-column label="上下行名称" prop="progressType" />
      <el-table-column label="排序" prop="sort" />
      <el-table-column label="状态" prop="hasDelete">
        <template #default="scope">
          <el-switch
            v-model="scope.row.hasDelete"
            class="ml-2"
            inline-prompt
            active-text="启用"
            inactive-text="禁用"
            :active-value="0"
            :inactive-value="1"
            style="
              --el-switch-on-color: #13ce66;
              --el-switch-off-color: #ff4949;
            "
            @change="changeUpdate(scope.row)"
          />
        </template>
      </el-table-column>
      <el-table-column label="操作" class-name="small-padding fixed-width">
        <template #default="scope">
          <el-button link type="primary" @click="handleUpdate(scope.row)"
            >修改</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <!-- 添加或修改基础数据-上下行数据对话框 -->
    <el-dialog :title="title" v-model="open" width="700px" append-to-body>
      <el-form
        ref="form"
        :model="forma"
        :rules="rules"
        label-width="120px"
        :inline="true"
      >
        <el-form-item label="上下行编号" prop="progressTypeCode">
          <el-input
            v-model="forma.progressTypeCode"
            placeholder="请输入上下行编号"
            style="width: 180px"
          />
        </el-form-item>
        <el-form-item label="上下行名称" prop="progressType">
          <el-input
            v-model="forma.progressType"
            placeholder="请输入上下行名称"
            style="width: 180px"
          />
        </el-form-item>
        <el-form-item label="排序" prop="sort">
          <el-input
            v-model="forma.sort"
            placeholder="请输入排序"
            style="width: 180px"
          />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script setup name="progressType">
import {
  insertManBasicprogressTypeapi,
  selectManBasicprogressTypeListapi,
  editManBasicprogressTypeapi,
} from "@/api/main/api.js";
import { reactive, ref, toRefs } from "vue";
defineExpose({ getList });
const emit = defineEmits(["parentCount"]);
const { proxy } = getCurrentInstance();
const loading = ref(true);
const title = ref("上下行信息新增");
const open = ref(false);
const data = reactive({
  // 基础数据-单位数据表格数据
  typeList: [],
  // 查询参数
  queryParams: {
    pageNum: "1",
    pageSize: "10",
    progressType: null,
    hasDelete: null,
  },
  // 表单参数
  forma: {},
  // 表单校验
  rules: {
    progressTypeCode: [
      {
        required: true,
        message: "上下行编号不能为空",
        trigger: ["blur", "change"],
      },
    ],
    progressType: [
      {
        required: true,
        message: "上下行名称不能为空",
        trigger: ["blur", "change"],
      },
    ],
    sort: [
      { required: true, message: "排序不能为空", trigger: ["blur", "change"] },
    ],
  },
  editobj: {},
});
const { queryParams, forma, rules, typeList, editobj } = toRefs(data);

/** 查询基础数据-上下行数据列表 */
const pageNumparent = ref(undefined);
const pageSizeparent = ref(undefined);
/** 查询列表 */
function getList(pageNum, pageSize) {
  loading.value = true;
  if (pageNum != undefined || pageSize != undefined) {
    pageNumparent.value = pageNum;
    pageSizeparent.value = pageSize;
    queryParams.value.pageNum = pageNum == undefined ? 1 : pageNum;
    queryParams.value.pageSize = pageSize == undefined ? 10 : pageSize;
  } else {
    queryParams.value.pageNum =
      pageNumparent.value == undefined ? "1" : pageNumparent.value;
    queryParams.value.pageSize =
      pageSizeparent.value == undefined ? "10" : pageSizeparent.value;
  }
  selectManBasicprogressTypeListapi(queryParams.value).then((res) => {
    if (res.code == 200) {
      typeList.value = res.data;
      loading.value = false;
      emit("parentCount", res.count);
    }
  });
}
getList();
// 取消按钮
function cancel() {
  open.value = false;
}
/** 搜索按钮操作 */
function handleQuery() {
  getList();
}
function congzhiQuery() {
  // 查询参数
  queryParams.value = {
    progressType: null,
    hasDelete: null,
  };
  getList();
}
/** 新增按钮操作 */
function handleAdd() {
  open.value = true;
  forma.value = {
    progressTypeCode: "",
    progressType: "",
    sort: "",
  };
  title.value = "上下行信息新增";
}
/** 修改按钮操作 */
function handleUpdate(row) {
  title.value = "上下行信息修改";
  editobj.value = JSON.parse(JSON.stringify(row));
  forma.value = JSON.parse(JSON.stringify(row));
  open.value = true;
}
/** 提交按钮 */
function submitForm() {
  proxy.$refs["form"].validate((valid) => {
    if (valid) {
      if (forma.value.id != null) {
        const newforma = JSON.parse(JSON.stringify(forma.value));
        for (const key in editobj.value) {
          for (const keya in newforma) {
            if (
              key == keya &&
              editobj.value[key] == newforma[keya] &&
              key != "id"
            ) {
              Reflect.deleteProperty(newforma, keya);
              Reflect.deleteProperty(newforma, "params");
            }
          }
        }
        if (Object.keys(newforma).length <= 1) {
          open.value = false;
        } else {
          editManBasicprogressTypeapi(newforma).then((res) => {
            proxy.$modal.msgSuccess("修改成功");
            open.value = false;
            getList();
          });
        }
      } else {
        insertManBasicprogressTypeapi(forma.value).then((res) => {
          proxy.$modal.msgSuccess("新增成功");
          open.value = false;
          getList();
        });
      }
    }
  });
}
function changeUpdate(row) {
  forma.value = JSON.parse(JSON.stringify(row));
  editManBasicprogressTypeapi({
    hasDelete: forma.value.hasDelete,
    id: row.id,
  }).then((res) => {
    proxy.$modal.msgSuccess("修改成功");
    open.value = false;
    getList();
  });
}
</script>
